<template>
	<view>

		<view class="flex_b m-r-30">
			<view class=""></view>
			<view class="flex" @click="openSx">
				<view class="">筛选</view>
				<view class="iconfont icon-shaixuan"></view>
			</view>
		</view>

		<block v-for="(item,i) in recommendList">
			<recommendItem :item="item"></recommendItem>
		</block>

		<uv-popup ref="popup" round="15">
			<view class="popupRec">
				<view class="flex_b">
					<view class="" style="width: 2em;" @click="getreset">重置</view>
					<view class="font-weight">筛选</view>
					<view class="f-t font-weight" @click="accomplish">完成</view>
				</view>
				<scroll-view scroll-y="true" class="scrollViewBox">

					<view class="flex_b m-t-30">
						<view class="font-weight grey">年龄</view>
						<view class="font-weight">{{Math.ceil(yearA)}}-{{Math.ceil(yearB)}}</view>
					</view>

					<view class="">
						<movable-area class="huaDboxModel ">
							<view class="huaDboxModelActive" :style="{width:widthModel+'rpx',left:leftModel+'rpx'}">
							</view>
							<movable-view :x="x" :y="y" class="huaDbox" direction="horizontal" @change="onChange">
							</movable-view>
							<movable-view :x="xA" :y="yA" class="huaDbox" direction="horizontal" @change="onChangeA">
							</movable-view>
						</movable-area>
					</view>

					<view class="font-weight grey m-t-50 m-b-30">显示性别</view>
					<view class="flex_b">
						<view v-for="(item,index) in gender" :key="index" @click="selectGenderFn(index)"
							:class="selectGender==index?'itemActive':''" class="itemBox flex_center">
							<text class="grey font-weight iconfont icon-nv" v-if="item=='女生'"></text>
							<text class="grey font-weight iconfont icon-nan" v-else-if="item=='男生'"></text>
							<text class="grey font-weight iconfont icon-qiehuan" v-else-if="item=='不限'"></text>
							<view class="m-l-20 font-28 font-weight">{{item}}</view>
						</view>
					</view>

					<view class="font-weight grey m-t-30 m-b-30">位置漫游</view>
					<view class="flex_b">
						<view class="">我的当前定位</view>
						<view class="grey flex" @click="$util.redirectTo('/frompages/addressSelect/addressSelect')">
							{{addressTitle||'请选择'}}<text class="iconfont icon-xiangyoujiantou m-l-10" style="font-size: 24rpx;"></text>
						</view>
					</view>
					<view class="flex_b m-t-30 p-t-30" style="border-top: 1rpx solid #f7f7f6;">
						<view class="">查看在线用户</view>
						<uv-switch v-model="is_line" size="18" activeColor="#00d9b4"></uv-switch>
					</view>
					<view class="flex_b m-t-30">
						<view class="">查看认证用户</view>
						<uv-switch v-model="is_auth" size="18" activeColor="#00d9b4"></uv-switch>
					</view>
					<view class="flex_b m-t-30 p-b-30 m-b-30" style="border-bottom: 1rpx solid #f7f7f6;">
						<view class="">查看新用户</view>
						<uv-switch v-model="is_new" size="18" activeColor="#00d9b4"></uv-switch>
					</view>

					<view class="flex_b m-b-30">
						<view class="">情感情况</view>
						<view class="grey flex" @click="$util.redirectTo('/frompages/marriage/marriage')">{{form.marriage||'请选择'}}<text
								class="iconfont icon-xiangyoujiantou m-l-10" style="font-size: 24rpx;"></text> </view>
					</view>

					<view class="flex_b m-b-30" @click="$util.redirectTo('/frompages/heightInterval/heightInterval')">
						<view class="">在校信息</view>
						<view class="grey flex">{{form.height||'请选择'}}<text class="iconfont icon-xiangyoujiantou m-l-10"
								style="font-size: 24rpx;"></text> </view>
					</view>

					<view class="flex_b m-b-30" @click="$util.redirectTo('/frompages/weightInterval/weightInterval')">
						<view class="">兴趣爱好</view>
						<view class="grey flex">{{form.weight||'请选择'}}<text class="iconfont icon-xiangyoujiantou m-l-10"
								style="font-size: 24rpx;"></text> </view>
					</view>

					<view class="flex_b m-b-30" @click="$util.redirectTo('/frompages/income/income')">
						<view class="">职业</view>
						<view class="grey flex">{{form.income||'请选择'}}<text class="iconfont icon-xiangyoujiantou m-l-10"
								style="font-size: 24rpx;"></text> </view>
					</view>

					<view class="flex_b m-b-30" @click="$util.redirectTo('/frompages/house/house',{type:'house'})">
						<view class="">住址</view>
						<view class="grey flex">{{form.house||'暂不透露'}}<text class="iconfont icon-xiangyoujiantou m-l-10"
								style="font-size: 24rpx;"></text> </view>
					</view>

					<view class="flex_b m-b-30" @click="$util.redirectTo('/frompages/house/house',{type:'car'})">
						<view class="">介绍</view>
						<view class="grey flex">{{form.car||'暂不透露'}}<text class="iconfont icon-xiangyoujiantou m-l-10"
								style="font-size: 24rpx;"></text> </view>
					</view>

				</scroll-view>
			</view>
		</uv-popup>
		<uv-load-more :status="status" />
		<view class="bottom-mar"></view>
	</view>
</template>

<script>
	export default {	
		data() {
			return {
				userInfo:{},
				addressTitle:'',
				status: 'nomore',
				pageNum: 1,
				show: true,
				is_auth:true,
				is_new:false,
				widthModel: '',
				leftModel: '',
				switchValue: true,
				selectGender: 2,
				yearA: 18,
				yearB: 30,
				x: 0,
				y: 0,
				xA: 100,
				xB: 200,
				old: {
					x: 0,
					y: 0
				},
				oldA: {
					xA: 100,
					yB: 0
				},
				gender: ['女生', '男生', '不限'],
				recommendList: [],
				is_line: false,
				form: {
					marriage: '',
					gender: '',
					height: '',
					weight: '',
					income: '',
					house: '',
					car: '',
					city_id:''
				}
			};
		},
		onLoad() {
			this.getUserInfo()
			this.recommendListFn()
		},
		onShow() {
			let wModel = 0
			wx.createSelectorQuery().selectAll('.huaDboxModel').boundingClientRect(rect => {
				wModel = rect[0].width
				this.widthModel = ((this.xA - this.old.x) / (wModel || 400 - 20)) * 700
				this.yearB = 42 * (this.xA / (wModel || 400 - 20)) + 18
			}).exec()
			uni.$on('heightFnI', data => {
				console.log('高的区间：', data);
				this.form.height = data
			})
			uni.$on('weightFnI', data => {
				console.log('宽的区间：', data);
				this.form.weight = data
			})
			uni.$on('incomeFn', data=> {
				console.log('年收入：', data);
				this.form.income = data
			})
			uni.$on('houseFn', data=> {
				console.log('房：', data);
				this.form.house = data
			})
			uni.$on('carFn', data=> {
				console.log('车：', data);
				this.form.car = data
			})
			uni.$on('province', data=> {
				console.log('地址：', data);
				this.addressTitle = data.title
				this.form.city_id = data.city_id
				// this.form.province_id = data.province_id
			})
			uni.$on('marriageFn', data=> {
				console.log('婚姻情况：', data);
				this.form.marriage = data
			})
		},
		onReachBottom() {
			// 触底加载
			this.recommendListFn()
		},
		methods: {
			getreset(){
				this.selectGender=2;
				this.addressTitle='';
				this.is_line=false;
				this.is_auth=true;
				this.is_new=false;
				this.form.gender = ''
				this.form.marriage='';
				this.form.height='';
				this.form.weight='';
				this.form.income='';
				this.form.house='';
				this.form.car='';
				 this.yearA = 18
				 this.yearB = 30
				this.accomplish()
			},
			// 获取用户信息
			getUserInfo() {
				this.$api.sendRequest({
					url: '/api/user/userInfo',
					success: res => {
				
						this.userInfo = res.data
						if(res.data.ageask){
							let arr = res.data.ageask.split('-')
							this.yearA = arr[0]
							this.yearB = arr[1]
						}
						
						this.form.height = res.data.heighask
						this.form.income = res.data.incomeask
						uni.$chat_userID = res.data.mobile
						uni.setStorageSync('userId', res.data.mobile);
					}
				})
			},
			accomplish() {
				this.show = true
				this.status = 'nomore'
				this.recommendList = []
				this.pageNum = 1
				this.recommendListFn()
				this.$refs.popup.close();
			},
			recommendListFn() {
				if (this.show) {
					this.status = 'loading'
					this.show = false
					this.$api.sendRequest({
						url: '/api/Friends/recommendList',
						data: {
							page: this.pageNum,
							limit: 10,
							...this.form,
							is_line:this.is_line?1:0,
							is_auth:this.is_auth?1:0,
							is_new:this.is_new?1:0,
							age: Math.ceil(this.yearA) + '-' + Math.ceil(this.yearB)
						},
						success: res => {
							this.show = true
							this.recommendList.push(...res.data.data)
							if (res.data.data.length < 10) {
								this.show = false
								this.status = 'nomore'
								return
							}
							this.pageNum++
							this.$forceUpdate()
						}
					})
				}

				// this.$api.sendRequest({
				// 	url:'/api/Friends/recommendList',
				// 	data:{
				// 		pege:this.pageNum,
				// 		limit:10
				// 	},success:res=>{
				// 		this.recommendList = res.data.data
				// 	}
				// })
			},
			selectGenderFn(i) {
				if (i == 2) {
					this.form.gender = ''
				} else {
					this.form.gender = i
				}
				this.selectGender = i
			},
			onChange(e) {
				this.x = e.detail.x
				this.y = e.detail.y
				let wModel = 0
				wx.createSelectorQuery().selectAll('.huaDboxModel').boundingClientRect(rect => {
					wModel = rect[0].width
					this.leftModel = (e.detail.x / (wModel - 20)) * 700
					this.widthModel = ((this.xA - this.x) / (wModel - 20)) * 700
					this.yearA = 42 * (this.x / (wModel - 20)) + 18
				}).exec()
			},
			onChangeA(e) {
				this.xA = e.detail.x
				this.yB = e.detail.y
				let wModel = 0
				wx.createSelectorQuery().selectAll('.huaDboxModel').boundingClientRect(rect => {
					wModel = rect[0].width
					this.widthModel = ((this.xA - this.old.x) / (wModel - 20)) * 700
					this.yearB = 42 * (this.xA / (wModel - 20)) + 18
				}).exec()
			},
			openSx() {
				this.$refs.popup.open('bottom');
			},

		}
	}
</script>

<style lang="scss">
	.itemBox {
		width: 216rpx;
		height: 88rpx;
		border-radius: 16rpx;
		border: 2rpx solid #F2F2F2;
		line-height: 88rpx;
		text-align: center;

		text {
			font-size: 32rpx;
		}
	}

	.itemActive {
		border: 2rpx solid #EC6930;

		text {
			font-size: 32rpx;
			color: #EC6930 !important;
		}

		view {
			color: #EC6930;
		}
	}

	.huaDboxModel {
		width: 700rpx;
		height: 4rpx;
		background-color: #efefef;
		border-radius: 8rpx;
		margin-top: 40rpx;
		position: relative;
	}

	.huaDboxModelActive {
		// width: 300rpx;
		height: 4rpx;
		background-color: #EC6930;
		border-radius: 8rpx;
		position: absolute;
		top: 0;
	}

	.huaDbox {
		background-color: #FFFFFF;
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		top: -20rpx;
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.1);
		border-radius: 6rpx;
		// border: 2rpx solid rgba(151, 151, 151, 0.08);
	}

	.popupRec {
		width: 700rpx;
		height: 1000rpx;
		background: #FFFFFF;
		border-radius: 30rpx 30rpx 0rpx 0rpx;
		padding: 25rpx;
	}

	.scrollViewBox {
		height: 950rpx;
	}


	.buyMian-slide,
	.buyMian-title {
		width: 654rpx;
		margin: 0 auto;
	}

	.buyMian-title {
		font-size: 34rpx;
		color: #212121;
		line-height: 36rpx;
		margin-top: 45rpx;
	}

	.buyMian-slide-title {
		font-size: 36rpx;
		color: #ff7500;
		line-height: 38rpx;
		margin-top: 25rpx;
		text-align: center;
	}

	.buyMian-slide-slide {
		margin: 10rpx auto 0;
	}

	/* range */

	.buyMian-slide-contain {
		width: 100%;
		display: flex;
		padding: 20px 0 10px;
		position: relative;
		left: -25rpx;
	}

	.buyMian-slide-range {
		font-size: 26rpx;
		color: #8a8a8a;
		margin-top: 15rpx;
	}

	.slider-left,
	.slider-right {
		margin-right: -8rpx;
	}

	.flex {
		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		;
		flex-wrap: wrap;
	}

	.flexSb {
		justify-content: space-between;
		-webkit-justify-content: space-between;
		-moz-justify-content: space-between;
		-ms-justify-content: space-between;
		-o-justify-content: space-between;
	}
</style>
